<template>
    <div id="chart-root">
    <div class="fixed">
        <Navbar>
            购物车
        <span class="header" v-if="isloginshow">
                <span class="header-span">
                    <span @click="showDeleteClick">{{showDelete?"完成":"编辑"}}&emsp;<span class="fa fa-edit"></span></span>   
                </span>
        </span>
    </Navbar>
    </div>
    <div id="text"> 
      <div v-show="!isloginshow">
        <div class="notLogin-tip">
            <router-link to="/Mine/Login"><button>登录</button></router-link>后，可查看购物车商品O(∩_∩)O~
        </div>
        <div id="child"><img src="../../static/image/child.png" alt="">
       <p>您还没有添加任何商品</p> 
        </div>
      </div>
        
        <div class="goods-box">
            <div class="goodslist-root">
                <div>
                    <div class="kind-box">
                        
                        <div v-for="(v,k) in cartList" class="cart-list">
                            <div class="shopname-box">
                                <label :for="k" class="kind-circle" >
                                     <span 
                                        class="fa fa-circle-thin shop-checked"
                                        style="color:#777"
                                        v-show="!isCategoryClick(k)"
                                    >
                                    </span>
                                    <span 
                                        class="fa fa-check-circle shop-checked"
                                        style="color:#ee0000"
                                        v-show="isCategoryClick(k)"
                                    >
                                    </span>
                                </label>
                                <input 
                                    :id="k" 
                                    class="select-input" 
                                    type="checkbox"
                                    @change="categoryClick($event,k)"
                                    :checked="isCategoryClick(k)" 
                                >
                                <span>{{k}}</span>
                            </div>
                            <div 
                                class="kind-main"
                                v-for="g in v"
                            >
                                <div class="kind-mian-left">
                                    <div class="manjian">满减</div>
                                    <div class="dashed"></div>
                                    <div>
                                        <label :for="g._id">
                                             <span 
                                                class="fa fa-circle-thin goods-checked"
                                                style="color:#777"
                                                v-show="!g.check"
                                            >
                                            </span>
                                            <span 
                                                class="fa fa-check-circle goods-checked"
                                                style="color:#ee0000"
                                                v-show="g.check"
                                            >
                                            </span>
                                        </label>
                                        <input 
                                            :id="g._id"
                                            type="checkbox"     
                                            class="select-input"
                                            v-model="g.check"
                                            @change="$forceUpdate()"
                                        >
                                    </div>
                        
                                </div>
                                <div class="kind-mian-right">
                                    <div class="kind-mian-right-top">
                                        购满188.00元，可减5.00元，多买多优惠
                                    </div>
                                    <div class="kind-mian-right-bottom">
                                        <div class="goods-img">
                                            <img :src="'/images/goods/'+g.goods.img[0]">
                                        </div>
                                        <div class="goods-info">
                                            <p></p>
                                            <p v-show="!showDelete" class="goods-regular">已选：<span v-for="r in g.reg">{{r}} </span>
                                            </p>
                                            <p 
                                                v-show="showDelete" 
                                                class="goods-regular edit-regular"
                                                @click="showCarClick(g)"
                                            >
                                                <span>
                                                    <span v-for="r in g.reg">{{r}} </span>
                                                </span>
                                                <span class="fa fa-angle-down"></span>
                                            </p>
                                            <p>
                                                <span 
                                                    class="price-span"
                                                > <span class="fa fa-rmb" style="color:red"></span>{{g.goods.newprice}}
                                                </span>
                                                <span 
                                                    class="num-span"
                                                > 
                                                    <div >
                                                        <span @click="numberDecrease(g,1)">-</span>
                                                        <span>{{g.gnum}}</span>
                                                        <span @click="numberDecrease(g,2)">+</span>
                                                    </div>
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
    <div v-show="isloginshow">
        <div class="bottom" v-if="!showDelete" >
            <div class="bottom-left">
                <span class="all-check">
                    <span>
                        <label 
                            for="allchecked" 
                           >
                             <span 
                                class="fa fa-circle-thin all-checked"
                                v-show="!isAllCheck()"
                            >
                            </span>
                            <span 
                                class="fa fa-check-circle all-checked"
                                style="color:#ee0000"
                                v-show="isAllCheck()"
                            >
                            </span>
                        </label>
                        <input 
                            id="allchecked"
                            type="checkbox"     
                            class="select-input"
                            @change="allCheck"
                            :checked="isAllCheck()"
                        >
                    </span>
                    <span class="quanxuan-span">全选</span>
                </span>
                <span>合计 : <span class="fa fa-rmb" style="color:red">{{totalPrice}}.00</span></span>
            </div>
            <div >去结算<span class="jinum">({{totalNum}})</span></div>
        </div>
        <div class="delete-bottom" v-if="showDelete">
            <div class="bottom-left">
                <span class="all-check all-checkt">
                    <span>
                        <label 
                            for="allchecked" 
                           >
                             <span 
                                class="fa fa-circle-thin all-checked"
                                v-show="!isAllCheck()"
                            >
                            </span>
                            <span 
                                class="fa fa-check-circle all-checked"
                                style="color:#ee0000"
                                v-show="isAllCheck()"
                            >
                            </span>
                        </label>
                        <input 
                            id="allchecked"
                            type="checkbox"     
                            class="select-input"
                            @change="allCheck"
                            :checked="isAllCheck()"
                        >
                    </span>
                    <span class="quanxuan-span">全选</span>
                </span>
            </div>
            <div class="delete-right">
                <div>分享</div>
                <div>移入关注</div>
                <div @click="deleteChecked">删除({{totalNum}})个</div>
            </div>
        </div>
    </div> 
  </div>   
        <transition >
            <div 
                v-show="showCar" 
                @click="hideShowCar"
            >
            </div>
        </transition>
        
        <transition name="aniEdit">
            <Cartreg v-if="showCar"></Cartreg>
        </transition>
            <Backtoup></Backtoup>
</div>
</template>

<script>
import Backtoup from "../components/Backtoup.vue"
    import Cartreg from '../components/Cartreg.vue'
    import Navbar from "../components/Navbar.vue"
    import {mapState} from 'vuex';
    export default {
        components:{
            Cartreg,
            Navbar,
            Backtoup
        },
        data: function() {
            return {
                gnum: 0,
                cartInfo: [],
                showDelete: false,
                isloginshow:false,
                inputId:[],
                userinfo:{}
            }
        },
        computed: {
            cartList: function() {
                var goodCategory = {};
                this.findchart.forEach(e => {
                    if (!goodCategory[e.goods.sellname]) {
                        goodCategory[e.goods.sellname] = [];
                    }
                    goodCategory[e.goods.sellname].push(e);
                });
                return goodCategory;
            },
            totalPrice:function(){
                this.inputId = [];   
                return this.findchart.map(g=>{
                    if(!g.check){
                        return 0;
                    }else{
                       return g.goods.newprice*g.gnum;
                    } 
                }).reduce((pre,price)=>{
                    return pre+price;
                },0);
            },
            totalNum:function(){
                var cartNum = 0;
                return this.findchart.map(g=>{
                    if(!g.check){
                        return 0;
                    }else{
                        this.inputId.push(g._id);  
                        return g.gnum;  
                    }
                }).reduce((pre,gnum)=>{
                    return pre+gnum;
                },0);
            },
            ...mapState([
                "findchart",
                "showCar",
                "skindItem",
            ])
        },
        mounted: function() {
            this.http.get("/api/users/isLogin")
            .then(res=>{
                if(res.data.param.isLogin){
                    if(res.data.param.userinfo){  
                        this.userinfo = res.data.param.userinfo 
                        var params = {
                        _id:res.data.param.userinfo._id
                        }
                        this.$store.dispatch("requestFindchart", params)
                        .then(res => {
                            
                            res.data.data.forEach(e => {
                                e.check = false;
                            });
                            this.cartInfo = res.data.data;
                            
                            this.$store.commit("setFindchart", res.data.data);
                        });
                    }
                    this.isloginshow=true;
                } else{
                    this.isloginshow=false;
                }  
            });      
        },
        methods: {
            // 点击修改购物车商品数量
            numberDecrease: function(g, n) {
                if (n == 1) {
                    g.gnum--;
                } else {
                    g.gnum++
                }
                if (g.gnum < 1) {
                    g.gnum = 1;
                } else {
                    g.check =true;
                    var params = {
                        gnum: g.gnum,
                        _id: g._id
                    }
                    this.$store.dispatch("requestEditChart", params)
                        .then(res => {
                            if (!res.data.err) {
                                console.log(res.data.msg);
                            }
                        });
                }
            },
            // 点击控制是否显示底部删除以切换编辑完成
            showDeleteClick:function(){
                this.showDelete = !this.showDelete;
            },
            // 点击商品规格显示出选择商品规格界面
            showCarClick:function(g){
                this.$store.commit("setSkindItem",g.goods);
                var gInfo = {
                    reg:g.reg,
                    _id:g._id
                }
                this.$store.commit("setCartItemReg",gInfo);

                this.$store.commit("setShowCar",true);
            },
            // 点击右上角叉号隐藏商品规格界面
            hideShowCar:function(){
                this.$store.commit("setShowCar",false);
            },
            // 点击店铺选中属于该店铺的所有商品
            categoryClick: function(e, k) {
                this.cartList[k].forEach(g => {
                    g.check = e.target.checked;
                });
                this.$forceUpdate();
            },
            // 判断是否选中属于该店铺的所有商品
            isCategoryClick: function(k) {
                return this.cartList[k].every(g => {
                    return g.check;
                });
            },
            // 点击全选，选择购物车内的全部商品
            allCheck: function(e) {
                this.findchart.forEach(g => {
                    g.check = e.target.checked;
                })
                this.$forceUpdate();
            },
            // 判断是否全选
            isAllCheck: function() {
                // console.dir(this.cartInfo);
                return this.findchart.every(g => {
                    return g.check;
                });
            },
            // 删除所选商品
            deleteChecked:function(){
                var params1 = {
                    inputId:this.inputId
                }
                this.$store.dispatch("requestDeleteChart",params1)
                .then(res1=>{
                    if(!res1.data.err){
                        var params = {
                            _id: this.userinfo._id
                        }
                        this.$store.dispatch("requestFindchart", params)
                            .then(res => {
                                res.data.data.forEach(e => {
                                    e.check = false;
                                });
                                this.cartInfo = res.data.data;
                                this.$store.commit("setFindchart", res.data.data);
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>
.fixed{
    position:fixed;
    top:0;
    left:0;
    z-index:200;
    background-color: #eeeeee;
    width:100%;
}
#text{
    margin-top:58px;
}
    #chart-root {
        width: 100vw;
        height: calc(100vh - 146px);
        opacity: 1;
    }
    
    .header {
        padding: 7px 15px;
        width: 100vw;
        height: 44px;
        border-bottom: 0.5px solid #eee;
    }
    
    .header-span{
        font-size: 14px;
        color: #777;
        -moz-user-select: none;
    }
    .header h1 {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
        
    }
    
    .goods-box {
        width: 100vw;
    }
    
    .goodslist-root {
        width: 100vw;
    }
    
    .goodslist-root h3 {
        padding-left: 5px;
        margin: 0;
        margin-bottom: 5px;
        font-weight: 500;
    }
    
    .h3-class {
        display: inline-block;
    }
    
    .delete {
        position: relative;
        font-size: 14px;
        top: 2px;
        left: 157px;
        color: white;
        display: inline-block;
        text-align: center;
        background-color: #ee0000;
        border-radius: 5px;
        line-height: 24px;
        width: 72px;
        height: 24px;
    }
    /*商品列表*/
    
    .select-input {
        display: none;
    }
    
    .kind-main {
        display: flex;
        padding-left: 2px;
        background-color: #fefefe;
        padding-top: 10px;
        padding-bottom: 5px;
        margin-bottom: 1px;
    }
    
    .manjian {
        background-color: #ee0000;
        border-radius: 3px;
        padding: 1px;
        color: white;
        font-size: 12px;
        text-align: center;
    }
    
    .dashed {
        width: 0;
        margin-top: 2px;
        border-left: 1px dashed #aaa;
        height: 50px;
        position: relative;
        left: 20px;
    }
    
    .kind-mian-right {
        flex-grow: 1;
    }
    
    .kind-mian-right-top {
        margin-left: 4px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        font-size: 13px;
    }
    
    .kind-mian-right-bottom {
        margin-top: 10px;
        margin-right: 10px;
        display: flex;
    }
    
    .goods-img img {
        width: 90px;
        height: 90px;
        margin-right: 10px;
    }
    
    .goods-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 58vw;
        /*height: 110px;*/
        /*overflow: hidden;*/
    }
    
    .goods-info>p:nth-of-type(1) {
        font-size: 13px;
        line-height: 16px;
        width: 100%;
    }
    
    .goods-regular{
        font-size: 12px;
        color: #666;
    }
    .edit-regular{
        background-color: #eee;
        display: flex;
        justify-content: space-between;
        padding: 1px 3px;
    }
    .edit-regular>span:nth-of-type(2){
        margin-right: 3px;
        font-size: 14px;
    }
    .goods-info>p:nth-of-type(4) {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    
    .price-span {
        color: #ee0000;
    }
    
    .num-span {
        font-size: 17px;
        font-family: "宋体";
        color: #666;
        position: relative;
        top: -2px;
    }
    
    .num-span div {
        background-color: #ededed;
        border-radius: 2px;
    }
    
    .num-span span:nth-of-type(1) {
        border-right: 1px solid #fefefe;
        padding: 5px;
        font-size: 19px;
    }
    
    .num-span span:nth-of-type(3) {
        border-left: 1px solid #fefefe;
        padding: 5px;
        font-size: 19px;
    }
    .all-checked{
        font-size: 22px;
        margin: 0 10px;
        position: relative;
        top: 2px;
    }
    .shop-checked{
        font-size: 22px;
        margin: 0 10px;
        position: relative;
        top: 2px;
    }
    .goods-checked{
        font-size: 22px;
        margin: 0 10px;
    } 
    .bottom {
        position: fixed;
        left: 0;
        bottom: 50px;
        width: 100vw;
        height: 45px;
        background-color:white;
        border-top: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
    }
    
    .bottom>div:nth-of-type(2) {
        width: 27vw;
        background-color: #ee0000;
        text-align: center;
        color: white;
        line-height: 45px;
        font-size: 20px;
    }
    
    .jinum {
        font-size: 12px;
    }
    
    .all-check {
        color: #666;
        font-size: 14px;
        line-height: 45px;
        padding: 0 12px;
        padding-left: 2px;
        position: relative;
        top: -1px;
    }
    
    #allcheck-label {
        position: relative;
        top: 4px;
        left: -1px;
    }
    
    .allcheck-label-span {
        position: relative;
        top: -10px;
        left: -1px;
    }
    
    .bottom-left>span:nth-of-type(2) {
        line-height: 45px;
        font-size: 18px;
        color: #111;
    }
    
    .cart-list {
        margin-top: 10px;
        border: 0.5px solid #eee;
        border-left: none;
        border-right: none;
    }
    
    .shopname-box {
        padding: 10px;
        padding-left: 3px;
        background-color: #f9f9f9;
    }
    
    .quanxuan-span {
        position: relative;
        top: -1px;
        left: -8px;
    }
    .delete-bottom{
        position: fixed;
        left: 0;
        bottom: 57px;
        width: 100vw;
        height: 45px;
        background-color: #f8f7f7;
        border-top: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
    }
    .delete-right{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .delete-right div{
        font-size: 14px;
        color: #444;
        border: 1px solid #ccc;
        border-radius: 2px;
        padding: 5px 10px;
        margin-right: 8px;
    }
    .delete-right div:nth-of-type(3){
        color: #ee0000;
        border: 1px solid #ee0000;
    }
     
    .notLogin-tip{
        position: absolute;
        top: 70px;
        left:40px;
        font-size: 16px;
        width:80%;
        height: 30px;
    }
    .notLogin-tip button{
        background-color: red;
        border-radius: 8px;
        border: 1px red solid;
    }
    #child{
        position: absolute;
        top: 200px;
        left: 60px;
        font-size: 16px;
        height: 30px;
        text-align:center;
    }
     #child img{
         width:40%;
     }

    /*//  编辑层动画*/
    .all-checkt{
        position: relative;
        top: 1px;
    }
    .aniEdit-enter,.aniEdit-leave-to{
        opacity: 0 ;
        height: 0 !important;
    }
    .aniEdit-enter-active,.aniEdit-leave-active{
        transition: all 0.7s;
    }
    .aniEdit-enter-to{
        opacity: 1;
        height: 55vh !important;
    }



    /*蒙灰层*/
    /*.car-mask{
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 1000;
    }*/
     /*蒙灰层动画*/
     /*.aniMask-enter,.aniMask-leave-to{
         opacity: 0;
     }
     .aniMask-enter-active,.aniMask-leave-active{
         transition: all 0.7s;
     }
    .aniMask-enter-to,aniMask-leave{
        opacity: 1;
    }*/
   
   
</style>